<template>
  <div class="recommendMain">
    <div class="headerBox flex align-center justify-between">
      <h3 class="flex align-center"><img src="/images/titleImg01.png" alt="">推荐模型<span>优选高效模型，助力精准评估</span></h3>
    </div>
    <div class="recommendBox">
      <el-carousel :interval="4000" type="card" height="250px">
        <el-carousel-item v-for="item in list" :key="item">
          <div class="itemBox">
            <div class="img">
              <img style="width: 100%; height: 100%;" :src="item.imageUrl" alt="">
            </div>
            <div class="text">
              <h3 class="ellipsis">{{ item.name }}</h3>
              <p class="flex align-center justify-between">
                <em>分类：{{ item.categoryAncestorsName }}</em>
                <span>{{ parseTime(item.auditTime, '{y}-{m}-{d} {h}:{i}') }}</span>
              </p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>
<script>
import {listRecommendForIndex} from '@/api/model/info'
export default {
  name: '',
  props: {},
  components: {},
  data() {
    return {
      list: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getList();
  },
  mounted() {
  },
  methods: {
   async getList(){
      const { code,data } = await listRecommendForIndex();
      if(code === 200){
        this.list = [...data];
      }
    },

  },
}
</script>
<style lang="scss" scoped>
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recommendMain {
  .headerBox {
    height: 70px;
    padding: 10px;

    h3 {
      color: #333;
      font-size: 24px;
      margin-bottom: 20px;
      margin-right: 40px;
      font-weight: bold;
      img{
        width: 30px;
        height: 30px;
        display: block;
        margin-right: 10px;
      }
      span {
        font-size: 14px;
        color: #9199a1;
        letter-spacing: .88px;
        line-height: 16px;
        font-weight: 400;
        margin-left: 28px;
        padding-top: 12px;
      }
    }
  }

  .recommendBox {
    padding: 0 10px;
    position: relative;

    .itemBox {
      overflow: hidden;
      border-radius: 5px;
      position: relative;

      &::before {
        content: '热推';
        display: block;
        width: 100px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background: #f33;
        color: #fff;
        font-size: 14px;
        position: absolute;
        right: -32px;
        top: 4px;
        z-index: 999;
        transform: rotate(45deg);
      }

      .img {
        overflow: hidden;
        height: 250px;

        img {
          width: 100%;
          aspect-ratio: auto;
          display: block;
          transition: all 0.2s;
        }
      }

      .text {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.3);
        padding: 10px 12px;
        box-sizing: border-box;

        h3 {
          margin: 0;
          max-height: 36px;
          font-size: 16px;
          font-weight: 500;
          color: #fff;
          line-height: 18px;
        }

        p {
          height: 12px;
          line-height: 12px;
          font-size: 12px;
          margin: 6px 0 0;
          color: #fff;

          em {
            font-style: normal;
          }
        }
      }

      &:hover {
        img {
          transform: scale(1.1);
        }
      }
    }
  }
}

:deep .swiper-button-prev,
:deep .swiper-button-next {
  color: #999;

  &:hover {
    color: #fff;
  }
}

:deep .swiper-button-next:after,
:deep .swiper-button-prev:after {
  font-size: 30px;
}

.custom-swiper-button-prev {
  width: 24px;
  height: 24px;
  position: absolute;
  left: -12px;
  top: 50%;
  margin-top: -18px;
  cursor: pointer;

  i {
    font-size: 30px;
    color: #9199a1;
    transform: scaleY(1.8);

    &:hover {
      color: #333;
    }
  }
}

.custom-swiper-button-next {
  width: 24px;
  height: 24px;
  position: absolute;
  right: -12px;
  top: 50%;
  margin-top: -18px;
  cursor: pointer;

  i {
    font-size: 30px;
    color: #9199a1;
    transform: scaleY(1.8);

    &:hover {
      color: #333;
    }
  }
}
</style>
